import React from 'react';
import { Menu } from 'antd';
import { Route, Switch, Redirect, MemoryRouter as Router, Link } from "react-router-dom";
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import FreshmanGuide from '../Pages/FreshmanGuide'
import 'antd/dist/antd.css';
import styled from 'styled-components'

const { SubMenu } = Menu;

export default class Sider extends React.Component {
  render() {
    return (
      <Router>
        <Container>
          <div className="left">
            <Menu
              style={{ width: 256 }}
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1', 'sub2', 'sub3']}
              mode="inline"
            >
              <SubMenu key="sub1" icon={<MailOutlined />} title="UI域开发助手">
                <Menu.ItemGroup key="g2" title="最近">
                  <Menu.Item key="3">UI域Wiki</Menu.Item>
                  <Menu.Item key="3">公告</Menu.Item>
                  <Menu.Item key="4">通知</Menu.Item>
                </Menu.ItemGroup>
                <Menu.ItemGroup key="g1" title="UI域项目">
                  <Menu.Item key="1"><Link to="/freshMan">xsy-neo-ui-component</Link></Menu.Item>
                  <Menu.Item key="2"><Link to="/freshMan">apps-ingage-web</Link></Menu.Item>
                  <Menu.Item key="2"><Link to="/freshMan">apps-ingage-admin</Link></Menu.Item>
                  <Menu.Item key="2"><Link to="/freshMan">xsy-paas-ui-webadmin</Link></Menu.Item>
                </Menu.ItemGroup>
              </SubMenu>
              <SubMenu key="sub2" icon={<AppstoreOutlined />} title="代码管理">
                <Menu.Item key="5">分支管理</Menu.Item>
                <Menu.Item key="6">关于发版</Menu.Item>
                <Menu.Item key="6">运维管理</Menu.Item>
                {/* <SubMenu key="sub3" title="Submenu">
                  <Menu.Item key="7">Option 7</Menu.Item>
                  <Menu.Item key="8">Option 8</Menu.Item>
                </SubMenu> */}
              </SubMenu>
              <SubMenu key="sub4" icon={<SettingOutlined />} title="技术内容">
                <Menu.Item key="9">React</Menu.Item>
                <Menu.Item key="10">Mobx-State-tree</Menu.Item>
              </SubMenu>
              <SubMenu key="sub4" icon={<SettingOutlined />} title="新人向导">
                <Menu.Item key="9">组织结构</Menu.Item>
                <Menu.Item key="9">假勤</Menu.Item>
                <Menu.Item key="9">节日</Menu.Item>
                <Menu.Item key="9">报销</Menu.Item>
                <Menu.Item key="10">出差</Menu.Item>
              </SubMenu>
            </Menu>
          </div>
          <div className="right">
            <Switch>
              <Route path="/freshMan" component={FreshmanGuide} />
              <Route path="*" exact component={FreshmanGuide} />
              <Route component={FreshmanGuide} />
            </Switch>
          </div>
        </Container>
      </Router>
    );
  }
}

const Container = styled.div`
  display: flex;
  .right{
    height: 100%;
  }
`